<template>
    <div class="wrapper">
        <top-header title="设置"></top-header>
        <div class="lBox">
            <div class="boxItem">
                <div class="itemHeader">
                    <image src="bmlocal://assets/acw/sys.png" class="itemHeaderImg"></image>
                    <text class="itemHeaderName">关于添美爱车网</text>
                    <text class="itemHeaderRight" @click="checkVersion">版本：V1.0.0</text>
                </div>
                <div>
                    <text class="itemDescServ">公司名称：内蒙古添美商务管理有限公司 </text>
                    <text class="itemDescServ">客服电话：0475-8255806 </text>
                </div>
            </div>

            <div class="boxItem">
                <div>
                    <text class="itemDesc">公司描述：</text>
                    <text class="itemDescContent itemDescIndent">       添美爱车网是一家互联网科技汽车服务公司，利用自身网络技术优势及多年汽车行业经验，致力于打造中国汽车服务第一网络平台。项目包含二手车买卖、售后维修服务、汽车保养等。旗下添美爱车APP就是实现集二手车买卖、汽车售后维修服务为一体的智能软件！</text>
                </div>

            </div>

            <div class="boxItem btnLoc">
                <wxc-button text="退出登录" type="blue" size="full" @wxcButtonClicked="wxcButtonClicked"></wxc-button>
            </div>
        </div>
        
    </div>
</template>
<script>

import { WxcButton } from 'weex-ui'
import header from '../common/header'
export default {
    components: {
        WxcButton,
        'top-header': header, 
    },
    data () {
    },
    methods: {
        jumpWeb(_url) {
            this.$router.toWebView({
                url: _url,
                title: ''
            })
        },
        wxcButtonClicked(e) {
            this.backLogin()
        },
        checkVersion() {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'app.checkVersion', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    "version": "1.0.0"
                }
            }).then(resData => {
                // 成功回调
                if(resData && resData.errno == 0){
                    this.$notice.toast({ message: resData.data})
                } else {
                    this.$notice.toast({ message: resData.errmsg})
                }
                // this.$notice.toast({ message: ""})
            }, error => {
                // 错误回调
                console.log(error)
                this.$notice.toast({ message: "验证失败, 请重试"})
            })
        },
        backLogin () {
            this.$storage.setSync('LoginStatus', 'false')
            this.$storage.setSync('UserInfo', {})
            this.$router.open({
                name: 'acw.home.login',
                type: 'PUSH',
                canBack: false,
            })
        }
    }
}
</script>
<style scoped>
.iconfont {
    font-family: iconfont;
}

.wrapper {
    background-color: #F4F4F4;
}
.tlt {
    text-align: center;
    color: #333;
    width: 750px;
    padding: 10px;
    font-size: 30px;
}

.lBox {
    display: flex;
    flex: 1;
    flex-direction: column;
    /* justify-content: space-around; */
    align-items: center;
    width: 750px;
}

.boxItem {
    width: 700px;
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    border-color: #E1E1E1;
    border-radius: 20px;
    margin-bottom: 15px;
}

.amountBox {
    width: 650px;
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.amountLabel {
    color: #A5A5A5;
    font-size: 30px;
}

.amountInput {
    width: 200px;
    height: 50px;
    line-height: 50px;
    border-style: solid;
    border-width: 1px;
    border-color: #E1E1E1;
    border-radius: 10px;
    text-align: center;
}

.btnLoc {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #eee;
    top: 100px;
}

.itemHeader {
    width: 650px;
    height: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #E1E1E1;
}

.itemHeaderImg {
    width: 70px;
    height: 70px;
    border-radius: 70px;
}

.itemHeaderName {
    margin-left: 20px;
    font-weight: 600px;
    font-size: 35px;

}

.itemHeaderRight {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    text-align: right;
    color: #A5A5A5;
    font-size: 30px;
    /* position: absolute;
    right: 0; */
    /* margin-right: 100px; */
    /* background-color: #000;
    color: #fff; */
    /* left: 100px;
    right: 0; */
}

.itemDesc {
    width: 650px;
    margin-top: 20px;
    margin-bottom: 10px;
    /* text-align: center; */
    color: #A5A5A5;
    font-size: 28px;
    lines: 2;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.itemDescServ {
    width: 650px;
    margin-top: 20px;
    /* margin-bottom: 10px; */
    /* text-align: center; */
    color: #A5A5A5;
    font-size: 28px;
    lines: 2;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.itemDescAddr {
    width: 650px;
    margin-top: 20px;
    margin-bottom: 20px;
    /* text-align: center; */
    color: #A5A5A5;
    font-size: 28px;
    lines: 2;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.itemDescContent {
    width: 650px;
    margin-top: 20px;
    margin-bottom: 28px;
    /* text-align: center; */
    color: #A5A5A5;
    font-size: 28px;
    /* lines: 2; */
    /* overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap; */
}

.itemDescIndent {
    text-indent: 150px;
}

.itemPics {
    width: 650px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.itemPic {
    width: 150px;
    height: 150px;
}

 .itemStatus {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     width: 650px;
     margin-bottom: 10px;
 }

.itemStatusFirst {
    margin-right: 20px;
    color: #A5A5A5;
    font-size: 28px;
}

.itemStatusSecond {
    color: #A5A5A5;
    font-size: 28px;
}

.gb-box {
    padding: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.i-gd {
    width: 350px;
    height: 510px;
    margin-bottom: 20px;
}

.gd-bg {
    background-color: #f4f4f4;
}

.gd-img {
    width: 350px;
    height: 350px;
}

.gd-tlt {
    font-size: 28px;
    color: #333;
    width: 350px;
    margin-top: 15px;
    overflow: hidden;
    lines: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gd-info {
    display: block;
    font-size: 28px;
    width: 350px;
    height: 65px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #9F8A60;
    background-color: #F1ECE2;
    overflow: hidden;
    lines: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gd-price {
    font-size: 28px;
    width: 350px;
    margin-top: 10px;
    color: #b4282d;
    overflow: hidden;
    lines: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
